<template>
	<el-descriptions
		border
		id="show-info"
		:column="1"
		v-loading="isLoading"
		v-if="mp4Exist || isLoading"
	>
		<template #extra><slot name="button"></slot></template>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<DataAnalysis />
					</el-icon>
					作品
				</div>
			</template>
			<div class="video-table-item">
				<p v-if="!doEdit">
					{{ musicInfo.title }}
				</p>
				<el-input v-else v-model="editTitle" placeholder="Please input" />
				<el-button size="small" v-if="!doEdit" @click="changeVideoName">
					修改
				</el-button>
				<el-button v-else size="small" @click="confirmChangeVideoName">
					完成
				</el-button>
			</div>
		</el-descriptions-item>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<CollectionTag />
					</el-icon>
					标签
				</div>
			</template>
			<tags-controller
				:showDelete="false"
				:tags="musicInfo.tags"
				@change="changeTags"
			/>
		</el-descriptions-item>
	</el-descriptions>

	<div class="video-player-box" v-if="mp4Exist">
		<video-player :url="url" :title="musicInfo.title" :autosize="false" />
	</div>

	<el-empty
		v-if="!mp4Exist && !isLoading"
		description="系统中未发现符合的媒体资料"
	>
		<el-button type="primary" @click="backToIndex">回到总表</el-button>
	</el-empty>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
	getMP3DataImageBuffer,
	isNotCompleteMp3Data,
	mergeMP3Data,
	setTagDivHeight,
} from "@/utils/common";
import { DataAnalysis, CollectionTag } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { fetchEditVideoTitle, fetchMP3List } from "@/utils/useRequest";
import videoPlayer from "./video-player.vue";
import { changeTagsHandler, IChangeTagMsg } from "@/utils/tag";
import tagsController from "@/components/common/tags-controller.vue";
import { useMP4RouteData, decodeMP4FromRouteData } from "@/utils/useMP3";
import { ElNotification } from "element-plus";

const url = ref("");
const router = useRouter();
const doEdit = ref(false);
const mp4Exist = ref(false);
const isLoading = ref(true);
const editTitle = ref("");
const musicInfo = ref(mergeMP3Data());
const { key } = useMP4RouteData();

function backToIndex() {
	router.push({
		path: "mp4",
	});
}

function changeTags(msg: IChangeTagMsg) {
	changeTagsHandler(msg, key.value);
}

decodeMP4FromRouteData({ key })
	.then((res) => {
		if (typeof res !== "string") {
			mp4Exist.value = false;
		} else {
			mp4Exist.value = true;
			url.value = res;
		}
	})
	.catch(() => {
		mp4Exist.value = false;
	})
	.finally(() => {
		isLoading.value = false;
		setTagDivHeight();
	});

if (isNotCompleteMp3Data(musicInfo.value)) {
	fetchMP3List({ key: key.value }).then(({ data }) => {
		musicInfo.value = mergeMP3Data(data[0]);
	});
}

function changeVideoName() {
	editTitle.value = musicInfo.value.title;
	doEdit.value = true;
}

function confirmChangeVideoName() {
	if (editTitle.value === musicInfo.value.title) {
		doEdit.value = false;
		ElNotification({
			type: "info",
			message: "未修改标题名：" + musicInfo.value.title,
		});
		return;
	} else {
		const title = editTitle.value;

		function failToEdit(error: any) {
			ElNotification({
				type: "error",
				message: `修改标题失败，代码：${error}`,
			});
		}
		fetchEditVideoTitle({ key: key.value, title })
			.then((res) => {
				if (res.code === 200) {
					ElNotification({
						type: "success",
						message: `成功修改标题为：${title}`,
					});
				} else {
					failToEdit(res.code);
				}
			})
			.catch((err) => failToEdit(err))
			.finally(() => {
				doEdit.value = false;
				musicInfo.value.title = title;
			});
	}
}
</script>

<style lang="less">
.video-player-box {
	width: 100%;
	display: flex;
	margin-top: 25px;
	align-items: center;
	justify-content: center;
}
</style>
